<template>
	<view>
		<uni-nav-bar title="我的置换" left-icon="back" @clickLeft="$tab.back()" :fixed="true" :statusBar="true"
			:border="false"></uni-nav-bar>

		<div class="px-20">
			<u-subsection :list="subsectionList" :current="current" activeColor="#FD8925"
				@change="refresh"></u-subsection>

			<div class="py-32">
				<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">

					<div class="flex" v-for="(item,index) in list" :key="item.id">
						<image :src="item.createUserTemp.avatar" class="avatar round" mode=""></image>
						<div class="ml-16" style="width: 622rpx;">
							<div class="flex justify-between items-start">
								<div class="">
									<div class="">{{item.createUserTemp.nickName}}</div>
									<div class="text-24" style="color: #666666;">{{item.createTime}}</div>
								</div>

								<div class="" :style="{
								color: item.state == 0 ? '#FF343B' : '#999999'
							}">
									{{item.state == 0 ? '待置换' : item.state == 1 ?  '已完成' : '已取消'}}
								</div>
							</div>

							<div class="mt-32">
								{{item.detail}}
							</div>

							<div class="mt-24 flex items-center">
								<image :src="globalConfig.imagePrefix + i" mode=""
									v-for="(i,j) in item.icons.split(',')" :key="j" class="prod"></image>
							</div>

							<div class="mt-24 flex items-center justify-between px-16 py-24 round-4"
								v-for="(i,j) in item.displaceUserList" :key="i.id" style="background: #F3F3F3;">
								<div class="flex items-center">
									<image
										:src="`https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/${selectIndex == j ? 'xuanzhong' : 'weixuanzhong'}@2x.png`"
										class="image-32" mode=""></image>
									<div class="ml-16">{{i.createUserTemp.nickName}}请求置换</div>
								</div>
								<div class="" style="color: #4083F2;" @click="handleKefu(i)">
									查看
								</div>
							</div>

							<div class="mt-32 flex items-center justify-between">
								<div class="" style="color: #FF343B;">
									<span>￥</span>
									<span class="text-36 font-500">{{item.price}}</span>
								</div>

								<div class="zhihuan-btn text-FFF" @click="tongzhi(index)"
									v-if="item.displaceUserList.length > 0 && current == 0">
									同意置换
								</div>
							</div>

							<u-divider></u-divider>
						</div>
					</div>
				</s-pull-scroll>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				list: [],
				globalConfig: getApp().globalData.config,
				selectIndex: 0,
				kefuShow: false,
				kefuData: null,
				subsectionList: ['我发布的置换', '我要置换'],
				current: 0
			};
		},
		onLoad() {
			thro = this
			this.refresh()
		},
		methods: {
			tongzhi: throttle(2000, async (index)=> {
				const res = await thro.$Api.substitution.agreeSubstitution({
					id: thro.list[index].displaceUserList[thro.selectIndex].id
				})
				thro.$modal.msg(res.msg)
				thro.refresh()
			},{
				noTrailing:true
			}),
			handleKefu(i) {
				// this.kefuData = i
				// this.kefuShow = true
				this.$tab.nav(`/pages/index/substitution/detail?id=${i.id}`)
			},
			refresh(e) {
				if (e || e == 0) {
					this.current = e
				}
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}
					const res = await this.$Api.substitution.mySubstitutionList({
						pageNum: pullScroll.page,
						pageSize: 10,
						type: this.current
					})

					this.list = this.list.concat(res.rows);

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.avatar {
		width: 72rpx;
		height: 72rpx;
	}

	.prod {
		width: 192rpx;
		height: 192rpx;
		border-radius: 4rpx;
	}

	.zhihuan-btn {
		width: 200rpx;
		height: 68rpx;
		background: #FD8925;
		border-radius: 12rpx;
		line-height: 68rpx;
		text-align: center;
	}

	.kefu-box {
		width: 436rpx;
		height: 486rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.kefu-li {
			width: 380rpx;
			height: 148rpx;
			background: #F2F7FC;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
</style>